<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="common/js/user/userRegister.js"></script>  
<title>Insert title here</title>
</head>
<script type="text/javascript">
function changeCode() {
	$('#codeImage').attr('src','authCode.action?abc=' + Math.random()); //链接后添加Math.random，确保每次产生新的验证码，避免缓存问题
}
</script>
<body>
<form class="form"  action="userRegister.action" method="post">
	<div class="inputing">
		<label class="input-title">UserName</label>
		<div class="right">
			<input type="name" name="user_name" class="input" id="userName" placeholder="" required="required" onKeyUp="confirmUserName()">
		</div>
	</div>
	<div class="inputing">
		<label class="input-title">New Password:</label>
		<div class="right">
			<input type="password" name="user_password" class="input" id="newPassword" placeholder="" required="required" onKeyUp=pwStrength(this.value) 
		onBlur=pwStrength(this.value) oninput="KeyUp()">
			<p class="msg"><i class="ati"></i></p>
			<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" 
			height="23" style='display:inline'> 
				<tr align="center" bgcolor="#53e3a6"> 
				<td width="33%" id="strength_L">weak</td> 
				<td width="33%" id="strength_M">strength</td> 
				<td width="33%" id="strength_H">strong</td> 
				</tr> 
			</table> 
		</div>
	</div>
	<div class="inputing">
		<label class="input-title">Confirm Password:</label>
		<div class="right">
			<input type="password" name="confirmPassword" class="input" id="confirmPassword" placeholder="" required="required" onkeyup="KeyUp()">
		</div>
	</div>
	<div class="inputing">
		<label class="input-title">Address:</label>
		<div class="right">
			<input name="user_address" id="address" placeholder="" class="input" required="required"/>
		</div>
	</div>
	<div class="inputing">
		<label class="input-title">Phone:</label>
		<div class="right">
			<input type="tel" name="user_cellphone" id="tel" placeholder="" class="input" required="required" onKeyUp="confirmTel()"/>
		</div>
	</div>
	<div class="inputing">
		<label class="input-title">E-mail:</label>
		<div class="right">
			<input type="text" name="user_email" id="email" placeholder="" class="input" required="required" onKeyUp="confirmEmail()"/>
		</div>
	</div>
	<div class="form-group">
		<label class="input-title">AuthCode:</label>
		<h5 style="color: red; margin-bottom: -10px; margin-top:10px; font-weight: normal;font-size: 15px">${failCheckCodeMsg}${nullCheckCodeMsg}</h5> <br />
		<input id="checkCode" name="checkCode" type="text" required="required"/>
		<!--这里img标签的src属性的值为后台实现图片验证码方法的请求地址-->
		<label><img id="codeImage" type="image" src="userAuthCode.action" onclick="changeCode()" style="cursor:pointer;" /></label>
		<label><a style="color:green;cursor:pointer" onclick="changeCode()">Change</a></label>
	</div>
	<input type="submit"  id="submitButton" value="submit" onclick="return authenticate()" disabled>
	<button type="button" class="btn2" id="back" onclick="window.location='loginView.action'">Return</button>
</form>
</body>
</html>